import TauTable from '@/components/TauTable';
import React, { useCallback, useEffect, useState } from 'react';
import { column } from '../stores/definitions';
import { useStore } from '@/hooks';
import { t } from '@lingui/macro';
import DrawerFooter from '@/components/DrawerFooter';
import { Button, ResponsiveGrid } from '@alifd/next';

export default function ABRouteSetting({ priceTransfer, onSubmit }) {
  const [data, setData] = useState({
    A: [],
    B: [],
  });
  const [selection, setSelection] = useState({
    fromRoutes: priceTransfer.fromRoutes,
    toRoutes: priceTransfer.toRoutes,
  });
  const { ccPriceTransferStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const res = await store.api.multiRoutes(priceTransfer);
      setData({ A: res.fromRoutes, B: res.toRoutes });
    })();
  }, [priceTransfer]);

  return (
    <div style={{ padding: '20px 0 20px 60px' }}>
      <ResponsiveGrid gap={20} >
        <ResponsiveGrid.Cell colSpan={6}>
          <div style={{ width: '100%', textAlign: 'center' }}>{t`A段`}</div>
          <TauTable
            hidePagination
            dataSource={data.A}
            primaryKey="id"
            columns={[
              column('beginAreaName', {}),
              column('endAreaName', {}),
              column('cprice.oneTripPrice.RMB', { width: 180 }),
            ]}
            rowSelection={{
              onChange: () => { },
              onSelect: (selected, record, records) => {
                setSelection({ ...selection, fromRoutes: records.map((r) => r.id) });
              },
              onSelectAll: (selected, records) => {
                setSelection({ ...selection, fromRoutes: records.map((r) => r.id) });
              },
              selectedRowKeys: selection.fromRoutes,
            }}
          />
        </ResponsiveGrid.Cell>
        <ResponsiveGrid.Cell colSpan={6}>
          <div style={{ width: '100%', textAlign: 'center' }}>{t`B段`}</div>
          <TauTable
            hidePagination
            dataSource={data.B}
            primaryKey="id"
            columns={[
              column('beginAreaName', {}),
              column('endAreaName', {}),
              column('cprice.oneTripPrice.RMB', { width: 180 }),
            ]}
            rowSelection={{
              onChange: () => { },
              onSelect: (selected, record, records) => {
                setSelection({ ...selection, toRoutes: records.map((r) => r.id) });
              },
              onSelectAll: (selected, records) => {
                setSelection({ ...selection, toRoutes: records.map((r) => r.id) });
              },
              selectedRowKeys: selection.toRoutes,
            }}
          />
        </ResponsiveGrid.Cell>
      </ResponsiveGrid>

      <DrawerFooter>
        <Button type="primary" onClick={() => onSubmit?.(selection)}>{t`确认`}</Button>
      </DrawerFooter>
    </div>
  );
}
